<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
			<!-- <button-counter></button-counter>对app来说是孙子组件，证明组件只能在父节点中使用 -->
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//定义一个名为button-counter的新组件
			// Vue.component('名称',{
			// 	配置
			// })
			
			// Vue.component('名称',{
			// 	// data 是一个function函数,防止组件多次使用,数据共享
			// 	data:function(){
			// 		return{
			// 			count:0
			// 		}
			// 	},
			// 	//组件的内容
			// 	template:`<button v-on:click="count++">
			// 				你点击了{{count}}次
			// 				</button>`
			// });
			new Vue({
				el:"#app",
				data:{
					msg:"父组件内容",
					count:0
				},
				components:{
					'button-counter':{
						data:function(){
							return{
								count:0
							}
						},
						//组件的内容，只支持单根节点
						template:`
								<div>
									<button v-on:click="count++">
										你点击了{{count}}次
									</button>
									<button-sub></button-sub>
								</div>
							`,
						components:{
							'button-sub':{
								template:`<span>我是button-counter的子组件</span>`
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
